<template>
  <headerXX :name="title"></headerXX>
  <div class="pull-refresh">
    <div class="ulbox">
      <div class="LBul">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div class="WZ_size_16 marginBottom10" style="font-weight: 700">基本信息</div>
          <div class="ZTimg">
            <van-image
              v-if="DDobj.orderStatus == 0"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../../static/SY.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == -1"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../../static/QX.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 2"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../../static/SH.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 1"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../../static/WC.png')"
              mode=""
            >
            </van-image>
            <van-image
              v-if="DDobj.orderStatus == 3"
              class="img"
              radius="4"
              width="80"
              height="25"
              :src="require('../../static/PJ.png')"
              mode=""
            >
            </van-image>
          </div>
        </div>
        <div class="LBli" style="display: flex; align-items: center">
          <div class="">
            <van-icon size="30" name="location" />
          </div>
          <div class="WZ_size_12 marginLeft5">
            {{ DDobj.orderLocation }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="display: flex; align-items: center; justify-content: space-between"
        >
          <div class="WZ_size_14">登记人</div>
          <div class="WZ_size_14">
            {{ DDobj.userName }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="display: flex; align-items: center; justify-content: space-between"
        >
          <div class="WZ_size_14">登记项目</div>
          <div class="WZ_size_14" style="display: flex; align-items: center">
            <div class="">
              {{ DDobj.orderType }}
            </div>
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="display: flex; align-items: center; justify-content: space-between"
        >
          <div class="WZ_size_14">登记时间</div>
          <div class="WZ_size_14">
            {{ DDobj.creationTime }}
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div
          class="LBli"
          style="display: flex; align-items: center; justify-content: space-between"
        >
          <div class="WZ_size_14">预约单号</div>
          <div class="WZ_size_14">
            {{ DDobj.orderNumber }}
          </div>
        </div>
        <van-divider
          v-if="DDobj.orderStatus != -1 && DDobj.orderStatus != 1 && DDobj.orderStatus != 3"
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div
          v-if="DDobj.orderStatus != -1 && DDobj.orderStatus != 1 && DDobj.orderStatus != 3"
          class="LBli"
          style="display: flex; align-items: center; justify-content: space-between"
        >
          <div class="WZ_size_14">订单二维码</div>
          <div class="WZ_size_14">
            <van-image class="img" radius="4" width="80" height="80" :src="qrCodeUrl" mode="">
            </van-image>
          </div>
        </div>
        <van-divider
          :style="{
            borderColor: '#999',
            margin: '15px 0'
          }"
        >
        </van-divider>
        <div class="WZ_size_16 marginBottom10" style="font-weight: 700" v-if="DDobj.detailList">
          登记信息
        </div>
        <div>
          <van-cell title="单位/部室" :value="DDobj.detailList[0].unit" />
          <van-cell title="一级部署编号" :value="DDobj.detailList[0].number" />
          <van-cell title="员工姓名" :value="DDobj.detailList[0].employeeName" />
          <van-cell title="性别" :value="DDobj.detailList[0].gender" />
          <van-cell title="身份证号" :value="DDobj.detailList[0].idCard" />
          <van-cell title="联系方式" :value="DDobj.detailList[0].contactInfo" />
          <van-cell title="上次疗养时间" :value="DDobj.detailList[0].lastConvalesceDate" />
          <van-cell title="疗养类型" :value="DDobj.detailList[0].convalesceType" />
          <van-cell title="疗养地" :value="DDobj.detailList[0].destination" />
          <van-cell title="出行时间" :value="DDobj.detailList[0].travelDate" />
          <van-cell title="备注" :value="DDobj.detailList[0].remark" />
          <!-- <van-field style="height: 130px" name="uploader" label="凭证">
            <template #input>
              <img
                style="width: 100px; height: 100px"
                :src="DDobj.detailList[0].base"
                alt=""
                @click="show = true"
              />
            </template>
          </van-field> -->
        </div>
      </div>
      <!-- <van-image-preview v-model:show="show" :images="images"> </van-image-preview> -->
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router"
import { ref } from "vue"
import headerXX from "../../components/title.vue"
import { Toast } from "vant"
import { getOrderDetailList } from "@/api/DD/index.js"
import { getmoreRoute } from "../../common/moreRouteList"
import moment from "moment"
import QRCode from "qrcode"
const route = useRoute()
let title = ref("订单详情")
let arrayString = ref(JSON.parse(decodeURIComponent(route.query.YYXQxx)))
let DDobj = ref({})
let qrCodeUrl = ref("")
const backImgList = ref([])
const fileList1 = ref([])
const description = ref("")
const show = ref(false)
const images = ref([])
const score = ref(0)
const text = ref("提交评价")
function generateQRCode() {
  setTimeout(async () => {
    try {
      qrCodeUrl.value = await QRCode.toDataURL(DDobj.value.id)
    } catch (err) {}
  }, 1000)
}
function getDD() {
  console.log(arrayString.value)
  let obj = {
    orderNumber: arrayString.value.orderNumber,
    postId: arrayString.value.postId,
    siteId: arrayString.value.siteId
  }
  getOrderDetailList(obj).then((res) => {
    if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
      DDobj.value = res.data
      images.value = [res.data.data.detailList[0].base];
      generateQRCode()
      if (DDobj.value.orderLocation == "") {
        DDobj.value.orderLocation = JSON.parse(getmoreRoute())[0].postName + "员工驿站"
      }
      if (DDobj.value.orderEvaluateAdmin) {
        backImgList.value = DDobj.value.orderEvaluateAdmin.img.split(",")
      }
      if (DDobj.value.orderEvaluateUser) {
        let imgList = DDobj.value.orderEvaluateUser.img.split(",")
        fileList1.value = imgList.map((item) => {
          return {
            status: "success",
            url: item,
            message: ""
          }
        })
        description.value = DDobj.value.orderEvaluateUser.content
        score.value = DDobj.value.orderEvaluateUser.score
        text.value = "确认修改"
      }

      if (DDobj.value.orderTime != "") {
        let orderTime = moment(DDobj.value.orderTime).format("YYYY-MM-DD")
        if (orderTime != "Invalid date") {
          DDobj.value.orderTime = orderTime
        }
      }
    } else {
      Toast.fail("网络错误")
    }
    console.log(DDobj.value)
  })
}
getDD()
</script>

<style lang="less" scoped>
@import "../../static/css/GYcSS.scss";
.pull-refresh {
  overflow: auto;
  color: #666;
}
.ulbox {
  // height: calc(100vh - 130rpx);
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;

  .LBul {
    background: #fff;
    //margin-top: 20rpx;
    border-radius: 10px;
    padding: 10px;
  }
}

.topXX {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0rpx auto;

  .top {
    font-size: 14px;
    color: rgb(255, 141, 26);
  }
}

.DI {
  position: fixed;
  z-index: 999;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(245, 245, 245, 1);

  .DI_bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}

.XXli {
  display: flex;
  align-items: center;

  .XXli_right {
    width: 100%;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
}

.ulboxNext {
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 10px;
  border-radius: 10px;

  .btn {
    margin-top: 20px;
  }
}
</style>
